<template>
<canvas ref="canvas" width="100%" height="100%"></canvas>
</template>

<script setup lang="ts"> 
import * as THREE from 'three';
import { onMounted,ref } from 'vue';
import { TextGeometry, FontLoader   } from 'three/examples/jsm/Addons.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const canvas = ref<HTMLCanvasElement | null>(null);

onMounted(() => { 
    if (canvas.value==null) {
        return
    }
    canvas.value.width = window.innerWidth
    canvas.value.height = window.innerHeight

    const renderer = new THREE.WebGLRenderer({
        canvas: canvas.value
    });

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 800);
    camera.lookAt(0, 0, 0);

    new OrbitControls(camera, canvas.value);

    const loader = new FontLoader();
    loader.load('/fonts/droid_sans_bold.typeface.json', function (font) { 
        const geometry = new TextGeometry( 'Hello three.js!', {
            font: font,
            size: 80,
            depth: 2,
            curveSegments: 12,
            bevelEnabled: true,
            bevelThickness: 10,
            bevelSize: 2,
            bevelSegments: 5
        } );

        const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
        const text = new THREE.Mesh( geometry, material );
        scene.add( text );
        console.log("文本加载完成.....");
    });

    
    // function animate() {
    //     requestAnimationFrame(animate);
    //     controls.update(); // 只在启用阻尼时才需要
    //     renderer.render(scene, camera);
    // }
    // animate();

    const animation = ()=>{
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    };

    animation();

});
</script>

<style scoped>
</style>